<template>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" @close="handleClose" :close-on-click-modal="false">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px">
            <el-form-item label="银行账户名" prop="bankAcc">
                <el-input v-model="form.bankAcc" placeholder="请输入银行账户名" />
            </el-form-item>
            <el-form-item label="银行名称" prop="bankName">
                <el-input v-model="form.bankName" placeholder="请输入银行名称" />
            </el-form-item>
            <el-form-item label="银行账号" prop="bankCardNo">
                <el-input v-model="form.bankCardNo" placeholder="请输入银行账号" />
            </el-form-item>

            <el-form-item label="开户行" prop="bankBranch">
                <el-input v-model="form.bankBranch" placeholder="请输入开户行" />
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { bankAdd, bankEdit } from './api'

export default {
    name: 'BankAddOrEdit',
    data() {
        return {
            dialogVisible: false,
            submitLoading: false,
            isEdit: false,
            form: {
                bankName: '',
                bankAcc: '',
                bankCardNo: '',
                bankBranch: '',
            },
            rules: {
                bankName: [
                    { required: true, message: '请输入银行名称', trigger: 'blur' },
                    // { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                bankAcc: [
                    { required: true, message: '请输入银行账户名', trigger: 'blur' },
                    // { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
                ],
                bankCardNo: [
                    { required: true, message: '请输入银行账号', trigger: 'blur' },
                    // { min: 16, max: 19, message: '长度在 16 到 19 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    computed: {
        dialogTitle() {
            return this.isEdit ? '编辑银行' : '添加银行'
        }
    },
    methods: {
        // 打开添加对话框
        openAdd() {
            this.isEdit = false
            this.resetForm()
            this.dialogVisible = true
        },

        // 打开编辑对话框
        openEdit(row) {
            this.isEdit = true
            this.form = { ...row }
            this.dialogVisible = true
        },

        // 重置表单
        resetForm() {
            this.form = {
                bankName: '',
                bankAcc: '',
                bankCardNo: '',
                bankBranch: '',
            }
            this.$nextTick(() => {
                this.$refs.form && this.$refs.form.clearValidate()
            })
        },

        // 提交表单
        handleSubmit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.submitLoading = true
                    try {
                        const api = this.isEdit ? bankEdit : bankAdd
                        const res = await api(this.form)
                        console.log(res, 'res')
                        this.$message.success(this.isEdit ? '编辑成功' : '添加成功')
                        this.handleClose()
                        this.$emit('refresh')
                    } catch (error) {
                        console.error('提交失败:', error)
                    } finally {
                        this.submitLoading = false
                    }
                }
            })
        },

        // 关闭对话框
        handleClose() {
            this.dialogVisible = false
            this.resetForm()
        }
    }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    text-align: right;
}

.image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 30px;
}
</style>
